import SEO from "../components/SEO";
import Vue from 'vue'
Vue.component('CustomRadio', {
  name: 'CustomRadio',
  props: {
    isChecked: Boolean,
    isDisabled: Boolean,
    value: [String, Number],
    m: String
  },
  render (h) {
    return h('c-button', {
      props: {
        ...this.$props,
        isDisabled: this.isDisabled,
        variantColor: this.isChecked ? 'red' : 'gray'
      },
      attrs: {
        role: 'radio',
        'aria-checked': this.isChecked
      }
    }, this.$slots.default)
  }
})

<SEO
  title="Radio"
  description="Radios are used when only one choice may be selected in a series of options."
/>

# Radio

Native HTML radios are 100% accessible by default, so we used a
[very common CSS technique](https://dev.to/lkopacz/create-custom-keyboard-accessible-radio-buttons-22eh)
to style the radio.

The Radio component composes `CControlBox`, a component we created to make it
easy to style sibling inputs. [Check it out](/controlbox)

<carbon-ad />

## Import

```js
import { CRadio, CRadioGroup } from "@chakra-ui/vue";
```

### Usage
```vue live=true
<template>
  <c-stack>
    <c-radio-group v-model="selectedHokage">
      <c-radio value="1">First Hokage</c-radio>
      <c-radio value="2">Second Hokage</c-radio>
      <c-radio value="3">Third Hokage</c-radio>
    </c-radio-group>
    <c-text>
      Favourite Hokage: {{ selectedHokage }}
    </c-text>
  </c-stack>
</template>

<script>
export default {
  data () {
    return {
      selectedHokage: '2'
    }
  }
}
</script>
```


### Radio with custom color

You can override the color scheme of the Radio to any color key specified in
`$chakraTheme.colors`.

### Usage
```vue live=true
<template>
  <c-stack>
    <c-radio-group v-model="color">
      <c-radio variant-color="red" value="red">Radio</c-radio>
      <c-radio variant-color="green" value="green">Radio</c-radio>
    </c-radio-group>
    <c-text>
      Color: {{ color }}
    </c-text>
  </c-stack>
</template>

<script>
export default {
  data () {
    return {
      color: 'green'
    }
  }
}
</script>
```

### Radio sizes

The checkbox comes with three sizes

```vue live=true
<c-radio-group>
  <c-radio size="sm" name="1" variant-color="red">
    Radio
  </c-radio>
  <c-radio size="md" name="1" variant-color="green">
    Radio
  </c-radio>
  <c-radio size="lg" name="1" variant-color="orange" default-is-checked>
    Radio
  </c-radio>
</c-radio-group>
```

### Disabled radios

```vue live=true
<template>
  <c-stack>
    <c-radio-group v-model="selectedVertical">
      <c-radio value="1" is-disabled>Disabled</c-radio>
      <c-radio value="2">Unchecked</c-radio>
      <c-radio value="3">Unchecked</c-radio>
    </c-radio-group>
    <c-text>
      Selected: {{ selectedVertical }}
    </c-text>
  </c-stack>
</template>

<script>
export default {
  data () {
    return {
      selectedVertical: '3'
    }
  }
}
</script>
```

### Horizontal alignment

```vue live=true
<template>
  <c-stack>
    <c-radio-group v-model="selectedHorizonatal" is-inline>
      <c-radio value="1" is-disabled>Disabled</c-radio>
      <c-radio value="2">Unchecked</c-radio>
      <c-radio value="3">Unchecked</c-radio>
    </c-radio-group>
    <c-text>
      Selected: {{ selectedHorizonatal }}
    </c-text>
  </c-stack>
</template>

<script>
export default {
  data () {
    return {
      selectedHorizonatal: '1'
    }
  }
}
</script>
```

### Invalid Checkbox

```vue live=true
<c-radio is-invalid>Radio</c-radio>
```

### Custom Radio Buttons

In some cases, you might need to create components that work like radios but
don't look like radios. Chakra exports a `CRadioButtonGroup` to help with this
scenario. Here's what you need to do:

1. Create a component that accepts the `isChecked` and `isDisabled` props.
2. Add the component as children of `CRadioButtonGroup` and pass a `value` prop
   to it.
3. If you pass `isDisabled` to any of it's children, it'll be skipped in the
   keyboard navigation.

Here we create our custom component before adding it to the template:

```js
const CustomRadio = {
  name: 'CustomRadio',
  props: {
    isChecked: Boolean,
    isDisabled: Boolean,
    value: [String, Number],
    mx: [String, Number]
  },
  template: `
    <c-button
      v-bind="$props"
      :variant-color="isChecked ? 'red' : 'gray'"
      role="radio"
      :aria-checked="isChecked"
    >
      <slot>
    <c-button>
  `
}

Vue.component('CustomButton', CButton)
```

```vue live=true
<template>
  <c-radio-button-group
    :value="value"
    is-inline
    @change="e => { value = e }"
    spacing="4"
  >
    <CustomRadio value="item-1" m="2">Custom Radio 1</CustomRadio>
    <CustomRadio value="item-2" m="2">Custom Radio 2</CustomRadio>
    <CustomRadio value="item-3" m="2">Custom Radio 3</CustomRadio>
    <CustomRadio is-disabled value="item-4" m="2">Custom Radio 4</CustomRadio>
  </c-radio-button-group>
</template>

<script>
export default {
  data () {
    return {
      value: 'item-1'
    }
  }
}
</script>
```



## Props

| Name             | Type                 | Default | Description                                                                                                           |
| ---------------- | -------------------- | ------- | --------------------------------------------------------------------------------------------------------------------- |
| id               | `string`             |         | The id assigned to input field                                                                                        |
| name             | `string`             |         | The name of the input field in a radio (Useful for form submission)                                                   |
| value            | `string` or `number` |         | The value to be used in the radio input. This is the value that will be returned on form submission                   |
| variantColor     | `string`             |         | The color of the radio when it's checked. This should be one of the color keys in the theme (e.g."green", "red")      |
| defaultIsChecked | `boolean`            |         | If `true`, the radio will be initially checked                                                                        |
| isChecked        | `boolean`            |         | If `true`, the radio will be checked.                                                                                 |
| isFullWidth      | `boolean`            |         | If `true`, the radio should take up the full width of the parent                                                      |
| size             | `sm`, `md`, `lg`     | `md`    | The size (width and height) of the radio                                                                              |
| isDisabled       | `boolean`            |         | If `true`, the radio will be disabled                                                                                 |
| isInvalid        | `boolean`            |         | If `true`, the radio is marked as invalid. Changes style of unchecked state                                           |
| aria-label       | `string`             |         | An accessible label for the radio in the event that there's no visible label or child text node is passed             |
| aria-labelledby  | `string`             |         | Id that points to the label for the radio in the event that no visible label or child text node is passed             |

### Events

| Name      | Payload | Description                                                |
| --------- | ------- | ---------------------------------------------------------- |
| `@change` | `value` | Event emitted when the `CRadioGroup` value changes shows.  |
| `@blur`   | `Event` | Event emitted when the `CRadio` is blurred.                |
| `@focus`  | `Event` | Event emitted when the `CRadio` is focused.                |
